<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 <link rel="stylesheet" href="layui/css/layui.css" media="all">
 <script src="layui/layui.js"></script>
</head>
<body>
	<div id="add_div" style="display: none;">
		<form lay-filter="u_fm" id="add_fm" class="layui-form" action="">
			<input type="hidden" name="Id">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">姓名:</label>
					<div class="layui-input-inline">
						<input type="tel" lay-verify="required" name="Name" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">年龄:</label>
					<div class="layui-input-inline">
						<input type="tel" name="Age" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">性别:</label>
					<div class="layui-input-inline">
						<select name="Sex" lay-filter="aihao">
							<option value=""></option>
							<option value="男">男</option>
							<option value="女">女</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">学历:</label>
					<div class="layui-input-inline">
						<select name="StuStatus" lay-filter="aihao">
							<option value=""></option>
							<option value="中专">中专</option>
							<option value="高中">高中</option>
							<option value="大专">大专</option>
							<option value="本科">本科</option>
							<option value="其他">其他</option>
							<option value="未知">未知</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">个人状态:</label>
					<div class="layui-input-inline">
						<select name="PerState" lay-filter="aihao">
							<option value=""></option>
							<option value="在读">在读</option>
							<option value="在职">在职</option>
							<option value="待业">待业</option>
							<option value="未知">未知</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">来源部门:</label>
					<div class="layui-input-inline">
						<select name="FromPart" lay-filter="aihao">
							<option value=""></option>
							<option value="网络">网络</option>
							<option value="市场">市场</option>
							<option value="教质">教质</option>
							<option value="学术">学术</option>
							<option value="就业">就业</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">所在区域:</label>
					<div class="layui-input-inline">
						<select name="Address" lay-filter="aihao">
							<option value=""></option>
							<option value="未知">未知</option>
							<option value="其它">其它</option>
							<option value="郑州">郑州</option>
							<option value="开封">开封</option>
							<option value="洛阳">洛阳</option>
							<option value="南阳">南阳</option>
							<option value="漯河">漯河</option>
							<option value="三门峡">三门峡</option>
							<option value="平顶山">平顶山</option>
							<option value="周口">周口</option>
							<option value="驻马店">驻马店</option>
							<option value="新乡">新乡</option>
							<option value="鹤壁">鹤壁</option>
							<option value="焦作">焦作</option>
							<option value="濮阳">濮阳</option>
							<option value="安阳">安阳</option>
							<option value="商丘">商丘</option>
							<option value="信阳">信阳</option>
							<option value="济源">济源</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">学员QQ:</label>
					<div class="layui-input-inline">
						<input type="tel" name="QQ" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">学员微信:</label>
					<div class="layui-input-inline">
						<input type="tel" name="WeiXin" class="layui-input">
					</div>
				</div>
			</div>	
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">电话:</label>
					<div class="layui-input-inline">
						<input type="tel" name="Phone" lay-verify="required|number" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>	
			<div class="layui-form-item">	
				<div class="layui-inline">
					<label class="layui-form-label">来源渠道:</label>
					<div class="layui-input-inline">
						<select name="MsgSource" lay-filter="aihao">
							<option value=""></option>
							<option value="未知">未知</option>
							<option value="百度">百度</option>
							<option value="百度移动端">百度移动端</option>
							<option value="360">360</option>
							<option value="360移动端">360移动端</option>
							<option value="搜狗">搜狗</option>
							<option value="搜狗移动端">搜狗移动端</option>
							<option value="UC移动端">UC移动端</option>
							<option value="直接输入">直接输入</option>
							<option value="自然流量">自然流量</option>
							<option value="直电">直电</option>
							<option value="微信">微信</option>
							<option value="QQ">QQ</option>
						</select>
					</div>
				</div>
			</div>	
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">来源网站:</label>
					<div class="layui-input-inline">
						<select name="SourceUrl" lay-filter="aihao">
							<option value=""></option>
							<option value="其它">其它</option>
							<option value="职英B站">职英B站</option>
							<option value="职英A站">职英A站</option>
							<option value="高考站">高考站</option>
				
						</select>
					</div>
				</div>
			</div>	
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">来源关键字:</label>
					<div class="layui-input-inline">
						<input type="tel" name="SourceKeyWord" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">课程方向:</label>
					<div class="layui-input-inline">
						<select name="LearnForward" lay-filter="aihao">
							<option value=""></option>
							<option value="软件开发">软件开发</option>
							<option value="软件设计">软件设计</option>
							<option value="网络营销">网络营销</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">学员关注:</label>
					<div class="layui-input-inline">
						<select name="StuConcern" lay-filter="aihao">
							<option value=""></option>
							<option value="A、近期可报名">A、近期可报名</option>
							<option value="B、一个月内可报名">B、一个月内可报名</option>
							<option value="C、长期跟踪">C、长期跟踪</option>
							<option value="D、无效">D、无效</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">打分:</label>
					<div class="layui-input-inline">
						<select name="Record" lay-filter="aihao">
							<option value=""></option>
							<option value="课程">课程</option>
							<option value="学费">学费</option>
							<option value="学时">学时</option>
							<option value="学历">学历</option>
							<option value="师资">师资</option>
							<option value="就业">就业</option>
							<option value="环境">环境</option>
							<option value="其他">其他</option>
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">是否有效:</label>
					<div class="layui-input-inline">
						<select name="IsValid" lay-filter="aihao">
							<option value=""></option>
							<option value="0">无效</option>
							<option value="1">有效</option>
							
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">是否回访:</label>
					<div class="layui-input-inline">
						<select name="IsReturnVist" lay-filter="aihao">
							<option value=""></option>
							<option value="0">不回访</option>
							<option value="1">回访</option>		
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">是否上门:</label>
					<div class="layui-input-inline">
						<select name="IsHome" lay-filter="aihao">
							<option value=""></option>
							<option value="0">未上门</option>
							<option value="1">上门</option>		
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">是否付款:</label>
					<div class="layui-input-inline">
						<select name="IsPay" lay-filter="aihao">
							<option value=""></option>
							<option value="0">未付款</option>
							<option value="1">已付款</option>		
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">付款金额:</label>
					<div class="layui-input-inline">
						<input type="tel" name="Money" lay-verify="required|number" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">是否退费:</label>
					<div class="layui-input-inline">
						<select name="IsReturnMoney" lay-filter="aihao">
							<option value=""></option>
							<option value="0">未退费</option>
							<option value="1">已退费</option>		
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">是否进班:</label>
					<div class="layui-input-inline">
						<select name="IsInClass" lay-filter="aihao">
							<option value=""></option>
							<option value="0">未进班</option>
							<option value="1">已进班</option>		
						</select>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">备注:</label>
					<div class="layui-input-inline">
						<input type="tel" name="Content" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>	
			<div class="layui-form-item">
				<div class="layui-inline">
					<div class="layui-input-inline">
						<button type="submit" id="tjStus" class="layui-btn" lay-submit="" lay-filter="addStus">添加</button>
						<button type="submit" id="xgStus" class="layui-btn" lay-submit="" lay-filter="updateStus">修改</button>
					</div>
				</div>
			</div>
		</form>
	</div>
	<form class="layui-form" action="">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">姓名:</label>
				<div class="layui-input-inline">
					<input type="tel" id="Name" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label">电话:</label>
				<div class="layui-input-inline">
					<input type="text" id="Phone" autocomplete="off"
						class="layui-input">
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label">咨询师:</label>
				<div class="layui-input-inline">
					<select id="ZiXunName" lay-filter="aihao">
						<option value=""></option>
						<option value="咨询师1">咨询师1</option>
						<option value="咨询师2">咨询师2</option>
						<option value="咨询师3">咨询师3</option>
					</select>
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label">是否缴费:</label>
				<div class="layui-input-inline">
					<select id="IsPay" lay-filter="aihao">
						<option value=""></option>
						<option value="是">是</option>
						<option value="否">否</option>
					</select>
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label">是否有效:</label>
				<div class="layui-input-inline">
					<select id="IsValid" lay-filter="aihao">
						<option value=""></option>
						<option value="是">是</option>
						<option value="待定">待定</option>
					</select>
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label">是否回访:</label>
				<div class="layui-input-inline">
					<select id="IsReturnVist" lay-filter="aihao">
						<option value=""></option>
						<option value="是">是</option>
						<option value="否">否</option>
					</select>
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label">QQ:</label>
				<div class="layui-input-inline">
					<input type="tel" id="QQ" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label">创建时间:</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" id="beginCreateTime" placeholder="YYYY-HH-DD"
						autocomplete="off" class="layui-input">
				</div>
				<div class="layui-form-mid">-</div>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" id="endCreateTime" placeholder="YYYY-HH-DD"
						autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label">上门时间段:</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" id="beginHomeTime" placeholder="YYYY-HH-DD"
						autocomplete="off" class="layui-input">
				</div>
				<div class="layui-form-mid">-</div>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" id="endHomeTime" placeholder="YYYY-HH-DD"
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<div class="layui-input-inline">
					<button type="submit" class="layui-btn" lay-submit=""
						lay-filter="getStudents">检索</button>
				</div>
			</div>
		</div>
	</form>
	<table id="demo" lay-filter="test"></table>
	 <script type="text/html" id="toolbarDemo">
  		<div class="layui-btn-container">
    		<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
  		</div>
	</script>
	
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	<script>
			layui.use(['table','layer','form','laydate'], function(){
			  var table = layui.table;
			  var layer=layui.layer;
			  var form=layui.form;
			  var laydate=layui.laydate;
			  var $=layui.$;
			  
			    	//执行一个laydate实例
				  laydate.render({
				    elem: '#beginCreateTime' //指定元素
				  });
				  laydate.render({
				    elem: '#endCreateTime' //指定元素
				  });
				  laydate.render({
				    elem: '#beginHomeTime' //指定元素
				  });
				  laydate.render({
				    elem: '#endHomeTime' //指定元素
				  });
			  
			  //第一个实例
			  table.render({
			    elem: '#demo'
			    ,toolbar: '#toolbarDemo'
			    ,id:'studentsTab'
			    ,url: 'getStudents' //数据接口
			    ,page: true //开启分页
			    ,cols: [[ //表头
			      {field: 'Id', title: '学生编号'}
			      ,{field: 'Name', title: '学员姓名'}
			      ,{field: 'Age', title: '年龄'}
			      ,{field: 'Sex', title: '性别'} 
			      ,{field: 'Phone', title: '学员电话'}
			      ,{field: 'StuStatus', title: '学历'}
			      ,{field: 'PerState', title: '个人状态'}
			      ,{field: 'MsgSource', title: '来源渠道'}
			      ,{field: 'SourceUrl', title: '来源网址'}
			      ,{field: 'SourceKeyWord', title: '来源关键词'}
			      ,{field: 'Address', title: '所在区域'}
			      ,{field: 'NetPusherId', title: '网络咨询Id'}
			      ,{field: 'QQ', title: '学员QQ'}
			      ,{field: 'WeiXin', title: '学员微信'}
			      ,{field: 'Content', title: '备注'}
			      ,{field: 'CreateTime', title: '创建时间'}
			      ,{field: 'LearnForward', title: '课程方向'}
			      ,{field: 'IsValid', title: '是否有效'}
			      ,{field: 'Record', title: '打分'}
			      ,{field: 'IsReturnVist', title: '是否回访'}
			      ,{field: 'FirstVisitTime', title: '首次回访时间'}
			      ,{field: 'IsHome', title: '是否上门'}
			      ,{field: 'HomeTime', title: '上门时间'}
			      ,{field: 'LostValid', title: '无效原因'}
			      ,{field: 'IsPay', title: '是否付款'}
			      ,{field: 'PayTime', title: '付款时间'}
			      ,{field: 'Money', title: '付款金额'}
			      ,{field: 'IsReturnMoney', title: '是否退费'}
			      ,{field: 'IsInClass', title: '是否进班'}
			      ,{field: 'InClassTime', title: '进班时间'}
			      ,{field: 'InClassContent', title: '进班备注'}
			      ,{field: 'AskerContent', title: '咨询师备注'}
			      ,{field: 'IsDel', title: '是否删除'}
			      ,{field: 'FromPart', title: '来源部门'}
			      ,{field: 'StuConcern', title: '学员关注'}
			      ,{field: 'IsBaoBei', title: '是否报备'}
			      ,{field: 'ZiXunName', title: '咨询师填写的姓名'}
			      ,{field: 'CreateUser', title: '录入人姓名'}
			      ,{field: 'ReturnMoneyReason', title: '退费原因'}
			      ,{field: 'PreMoney', title: '预付定金'}
			      ,{field: 'PreMoneyTime', title: '预付定金时间'}
			       ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
			    ]]
			  });
			  
			  form.on('submit(getStudents)', function(data){
			 		//这里以搜索为例
						table.reload('studentsTab',{
							where: { //设定异步数据接口的额外参数，任意设
								   Name:$("#Name").val(),
								   Phone:$("#Phone").val(),
								   ZiXunName:$("#ZiXunName").val(),
								   IsPay:$("#IsPay").val(),
								   IsValid:$("#IsValid").val(),
								   IsReturnVist:$("#IsReturnVist").val(),
								   QQ:$("#QQ").val(),
								   beginCreateTime:$("#beginCreateTime").val(),
								   endCreateTime:$("#endCreateTime").val(),
								   beginHomeTime:$("#beginHomeTime").val(),
								   endHomeTime:$("#endHomeTime").val()
							   }
							,page: {
								 curr: 1 //重新从第 1 页开始
							}
						});				
			 		return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
				//添加
				form.on('submit(addStus)', function(data){
			 			$.post("addStus",$("#add_fm").serialize(),function(res){
			 				if(res.code=="0"){
			 					layer.closeAll();
							    table.reload('studentsTab');
							    layer.msg(res.msg);
			 				}else{
			 				 layer.msg(res.msg);
			 				}
			 			},"json");
			 		return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
				//修改
				form.on('submit(updateStus)', function(data){
			 			$.post("updateStus",$("#add_fm").serialize(),function(res){
			 				if(res.code=="0"){
			 					layer.closeAll();
							    table.reload('studentsTab');
							    layer.msg(res.msg);
			 				}else{
			 				 layer.msg(res.msg);
			 				}
			 			},"json");
			 		return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
				//触发事件
				table.on('toolbar(test)', function(obj){
				  var checkStatus = table.checkStatus(obj.config.id);
				  switch(obj.event){
				    case 'add':
				    $("#add_fm")[0].reset();
				    	$("#xgStus").hide();
				    	$("#tjStus").show();
				     	layer.open({
				     		type:1,
				     		content:$("#add_div"),
				     		area:['500px','500px']
				     	});
				    break;
				   
				  };
				});
				
				//工具条事件
				table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				  var data = obj.data; //获得当前行数据
				  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
				 
				  if(layEvent === 'del'){ //删除
				    layer.confirm('真的删除行么', function(index){
				      $.post("deleteStus",{Id:data.Id},function(res){
			 				if(res.code=="0"){
			 					layer.closeAll();
							    table.reload('studentsTab');
							    layer.msg(res.msg);
			 				}else{
			 				 layer.msg(res.msg);
			 				}
			 			},"json");
				    });
				  } else if(layEvent === 'edit'){ //编辑
				    	$("#tjStus").hide();
				    	$("#xgStus").show();
				    	form.val('u_fm',data);
				     	layer.open({
				     		type:1,
				     		content:$("#add_div"),
				     		area:['500px','500px']
				     	});
				  } else if(layEvent === 'LAYTABLE_TIPS'){
				    layer.alert('Hi，头部工具栏扩展的右侧图标。');
				  }
				});
						 
		});
	</script>
</body>
</html>